<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-input
          v-model="query.name"
          placeholder="供应商名称"
          class="handle-input mr10"
        ></el-input>
        <el-input
          v-model="query.mobile"
          placeholder="手机号"
          class="handle-input mr10"
        ></el-input>

        <el-select
          clearable
          v-model="query.enableStatus"
          placeholder="合作商状态"
          class="handle-select mr10"
        >
          <el-option key="1" label="启用" value="0"></el-option>
          <el-option key="2" label="停用" value="1"></el-option>
        </el-select>

        <!-- <div class="block" style="margin-right: 10px; float: left;">
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="left"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div> -->
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button
          type="danger"
          @click="delAllSelection"
          v-if="smPermissions.includes('product:company:delete')"
          >删除</el-button
        >
        <el-button
          type="primary"
          @click="handleSupplier"
          v-if="smPermissions.includes('product:company:save')"
          >添加供货商</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="供应商名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="mobile"
          label="手机号"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="linkman"
          label="联系人"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="createDate"
          label="创建日期"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="memo"
          label="备注"
        ></el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleEdit(scope.$index, scope.row)"
              v-if="smPermissions.includes('product:company:update')"
              >编辑</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.enableStatus == 0"
              @click="handleStop(scope.$index, scope.row)"
              >停用</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.enableStatus == 1"
              @click="handleEnable(scope.$index, scope.row)"
              >启用</el-button
            >
            <el-button
              type="text"
              @click="handleDelete(scope.$index, scope.row)"
              v-if="smPermissions.includes('product:company:delete')"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total,sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 20, 30]"
          @size-change="handleSizeChange"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="50%">
      <el-form
        ref="editForm"
        :model="editForm"
        label-width="auto"
        :rules="rules"
      >
        <el-form-item label="供应商名称" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="linkman">
          <el-input v-model="editForm.linkman"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="editForm.memo"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="enableStatus">
          <el-select
            v-model="editForm.enableStatus"
            placeholder="是否启用"
            clearable
            class="handle-select mr10"
          >
            <el-option key="1" label="启用" value="0"></el-option>
            <el-option key="2" label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增弹出框 -->
    <el-dialog title="新增" :visible.sync="addVisible" width="50%">
      <el-form ref="addForm" :model="addForm" label-width="auto" :rules="rules">
        <el-form-item label="供应商名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="linkman">
          <el-input v-model="addForm.linkman"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="addForm.memo"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="enableStatus">
          <el-select
            v-model="addForm.enableStatus"
            placeholder="是否启用"
            clearable
            class="handle-select mr10"
          >
            <el-option key="1" label="启用" value="0"></el-option>
            <el-option key="2" label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveIncrease">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import util from "utils/util";
import { mapGetters } from "vuex";
export default {
  name: "suppliermanage",
  data() {
    var validateMobile = function(rule, value, callback) {
      if (
        typeof parseInt(value) != "number" ||
        !/^1[3456789]\d{9}$/.test(value)
      ) {
        return callback(new Error("请正确输入11位手机号"));
      }
      callback();
    };
    return {
      smPermissions: [],
      query: {
        enableStatus: "",
        name: "",
        mobile: "",
        pageIndex: 1,
        pageSize: 20,
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      addVisible: false,
      pageTotal: 0,
      form: {},
      rules: {
        name: [
          { required: true, message: "必填不能为空", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "供应商名称在1到20字之间",
            trigger: "blur",
          },
        ],
        linkman: [{ required: true, message: "必填不能为空", trigger: "blur" }],
        enableStatus: [
          { required: true, message: "必填不能为空", trigger: "blur" },
        ],
        mobile: [
          { required: true, validator: validateMobile, trigger: "blur" },
        ],
        memo: [{ required: true, message: "必填不能为空", trigger: "blur" }],
      },
      addForm: {
        name: "",
        linkman: "",
        mobile: "",
        memo: "",
        enableStatus: "",
      },
      editForm: {
        name: "",
        linkman: "",
        mobile: "",
        memo: "",
        enableStatus: "",
      },
      idx: -1,
      ids: [],
      // value2: ""
    };
  },
  created() {
    this.getData();
    this.smPermissions = this.permissions;
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  watch: {
    "$route.path": function(newVal, oldVal) {
      if (newVal == "/supplier-manage") {
        this.smPermissions = this.permissions;
      }
    },
    // 刷新浏览器时触发
    permissions: function(newVal, oldVal) {
      // console.log(newVal, oldVal);
      this.smPermissions = newVal;
    },
  },
  methods: {
    disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7;
      return time.getTime() > Date.now();
      return time.getTime() < Date.now();
      return time.getTime() > Date.now() - 8.64e7;
    },
    // 获取数据
    getData() {
      this.$axios
        .get("/product/company/page", {
          params: {
            page: this.query.pageIndex,
            limit: this.query.pageSize,

            name: this.query.name,
            mobile: this.query.mobile,
            enableStatus: this.query.enableStatus,
          },
        })
        .then(({ data: res }) => {
          console.log(res);
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.pageTotal = res.data.total || 0;
          this.tableData = res.data.list;
          this.tableData.map((item) => {
            item.createDate = this.dateFormat(item.createDate);
          });
        });
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.getData();
    },

    // 新增供货商
    handleSupplier() {
      this.addVisible = true;
    },
    // 保存新增供货商
    saveIncrease() {
      // 判空处理
      var bool = util.isEmpty(this.addForm);
      if (bool) {
        return this.$message.error("必填项不能为空");
      }
      this.$axios
        .post("/product/company", this.addForm)
        .then(({ data: res }) => {
          console.log(res);
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.addVisible = false;
          this.addForm = {};
          this.getData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除操作
    handleDelete(index, row) {
      this.ids[0] = row.id;
      util.delete.call(this, "/product/company", index, this.ids, this.getData);
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      var ids = this.multipleSelection.map((item) => {
        return item.id;
      });
      util.delete.call(this, "/product/company", "", ids, this.getData);
    },
    handleEdit(index, row) {
      this.editVisible = true;

      this.getEditData(index, row);
    },
    getEditData(index, row) {
      return this.$axios
        .get(`/product/company/${row.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.code);
          }
          var { id, name, linkman, mobile, memo, enableStatus } = res.data;
          this.editForm = { id, name, linkman, mobile, memo, enableStatus };
          this.editForm.enableStatus = this.editForm.enableStatus.toString();
        });
    },
    // 停用
    handleStop(index, row) {
      // 二次确认
      this.$confirm("确定要停用吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          this.editForm.id = row.id;
          this.editForm.name = row.name;
          this.editForm.linkman = row.linkman;
          this.editForm.mobile = row.mobile;
          this.editForm.enableStatus = "1";
          this.editForm.memo = row.memo;
          this.saveEdit();
          // this.getEditData(index, row).then(() => {

          // });
        })
        .catch(() => {});
    },
    // 启用
    handleEnable(index, row) {
      // 二次确认
      this.$confirm("确定要启用吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          this.editForm.id = row.id;
          this.editForm.name = row.name;
          this.editForm.linkman = row.linkman;
          this.editForm.mobile = row.mobile;
          this.editForm.memo = row.memo;
          this.editForm.enableStatus = "0";
          this.saveEdit();
          // this.getEditData(index, row).then(() => {

          // });
        })
        .catch(() => {});
    },
    // 保存编辑
    saveEdit() {
      console.log(this.editForm);
      // 判空处理
      var bool = util.isEmpty(this.editForm);
      if (bool) {
        return this.$message.error("必填项不能为空");
      }
      this.$axios
        .put("/product/company", {
          id: this.editForm.id,
          name: this.editForm.name,
          linkman: this.editForm.linkman,
          mobile: this.editForm.mobile,
          memo: this.editForm.memo,
          enableStatus: this.editForm.enableStatus,
        })
        .then(({ data: res }) => {
          console.log(res);
          if (res.code !== 0) {
            return;
          }
          this.$message.success("操作成功");
          this.editVisible = false;
          this.getData();
        })
        .catch(() => {});
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
    handleSizeChange(val) {
      this.$set(this.query, "pageSize", val);
      this.getData();
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 120px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
  width: 120px;
  float: left;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
